<div [ngStyle]="isBig? testing:none"  class="navbar navbar-fixed-top  navbar-inverse transitioneio"   id="menu" (scroll)="test($event)">
    <div class="container-fluid"  >
        <div class="navbar-header">
            <a class="navbar-brand transitioneio" routerLink="/" [ngClass]="{'astyle':judge}">Sam</a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button></div>
        <div class="navbar-collapse collapse navbar-responsive-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" >
                <li dropdown>
                    <a dropdownToggle class="dropdown-toggle"  class="transitioneio" [ngClass]="{'astyle':judge}">
                        文章
                    </a>

                    <ul *dropdownMenu class="dropdown-menu" role="menu">
                        <li role="menuitem">
                            <a routerLink="article">首页</a>
                        </li>
                        <li role="menuitem" dropdown triggers="mouseover">
                            <a dropdownToggle class="dropdown-item dropdown-toggle" (click)="false">分类</a>
                            <ul *dropdownMenu class="dropdown-menu" role="menu">
                                <li role="menuitem">
                                    <a class="dropdown-item" href="#">angular</a>
                                </li>
                                <li role="menuitem">
                                    <a class="dropdown-item" href="#">bootstrap</a>
                                </li>
                                <li role="menuitem">
                                    <a class="dropdown-item" href="#">jquery</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a routerLink="music"  class="transitioneio" [ngClass]="{'astyle':judge}">音乐</a>
                </li>
                <li>
                    <a routerLink="mv"  class="transitioneio" [ngClass]="{'astyle':judge}">MV</a>
                </li>

                <li>
                    <a routerLink="message"  class="transitioneio" [ngClass]="{'astyle':judge}">留言</a>
                </li>
                <li>
                    <a routerLink="help" class="transitioneio" [ngClass]="{'astyle':judge}">帮助</a>
                </li>
                <li>
                    <a routerLink="about" class="transitioneio" [ngClass]="{'astyle':judge}">其他未知的</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right" *ngIf="!userService.isLogin">

                <li>
                    <a routerLink="login"  class="transitioneio" [ngClass]="{'astyle':judge}">登录</a>
                </li>
                <li>
                    <a routerLink="signup"  class="transitioneio" [ngClass]="{'astyle':judge}">注册</a>
                </li>

            </ul>
            <ul class="nav navbar-nav navbar-right" *ngIf="userService.isLogin ">
                <li>
                    <a routerLink="user"  class="transitioneio" [ngClass]="{'astyle':judge}">{{userService.userName}}</a>
                </li>

            </ul>


        </div>

    </div>

</div>
<router-outlet>

</router-outlet>